<template>
  <div class="assembly">
    <!-- 组件区 -->

    <!-- 模板区 -->
    <el-card
      v-for="(item, index) in templates"
      :key="index"
      :body-style="{ padding: '0px' }"
      draggable="true"
      shadow="hover"
      @dragstart.native="dragstart($event, item.options)"
    >
      <div class="tips">
        <i class="iconfont icon-moban"></i>
        <div style="padding: 14px">{{ item.name }}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
import template from '@/mixins/template'
import { templates } from '@/components/Templates'

export default {
  mixins: [template],
  data() {
    return {
      templates
    }
  },

  methods: {
    dragstart(e, data) {
      e.dataTransfer.setData('data', JSON.stringify(data))
    }
  }
}
</script>

<style lang="scss" scoped>
.assembly {
  width: 270px;
  padding: 10px;
}
.el-image {
  width: 100%;
  height: 100px;
}
.tips {
  width: 100%;
  height: 100px;
  text-align: center;
  .iconfont {
    font-size: 45px;
  }
}
</style>
